<template>
  <div class="bg-light min-vh-100">
    <div v-if="error" class="alert alert-danger m-3">
      {{ error }}
    </div>
    <template v-else>
      <!-- Header -->
      <div class="header d-flex align-items-center">
        <router-link :to="{
          name: 'EnglishReadingText',
          query: { year: exam, text: part }
        }" class="text-dark">
          <i class="bi bi-chevron-left fs-4"></i>
        </router-link>
        <h5 class="mb-0 mx-auto">{{ title }}</h5>
      </div>

      <!-- Analysis Content -->
      <div class="analysis-content p-4">
        <div v-if="loading" class="text-center p-5">
          <div class="spinner-border text-primary" role="status">
            <span class="visually-hidden">Loading...</span>
          </div>
          <p class="mt-3">正在生成解析...</p>
        </div>
        
        <div v-else>
          <div v-for="answer in answers" :key="answer.question_number" class="question-card mb-4">
            <!-- 题号和答案 -->
            <div class="card-header d-flex justify-content-between align-items-center">
              <h5 class="mb-0">第{{ answer.question_number }}题</h5>
              <div class="answer-badge">
                正确答案：<span class="answer">{{ answer.answer }}</span>
              </div>
            </div>

            <div class="card-body">
              <!-- 考点 -->
              <div class="analysis-section">
                <h6 class="section-title">
                  <i class="bi bi-bookmark-fill me-2"></i>题目考点
                </h6>
                <p>{{ answer.analysis.key_point }}</p>
              </div>

              <!-- 原文定位 -->
              <div class="analysis-section">
                <h6 class="section-title">
                  <i class="bi bi-text-paragraph me-2"></i>原文定位
                </h6>
                <blockquote v-for="(text, index) in answer.analysis.text_reference" 
                           :key="index" 
                           class="reference-text">
                  {{ text }}
                </blockquote>
              </div>

              <!-- 选择理由 -->
              <div class="analysis-section">
                <h6 class="section-title">
                  <i class="bi bi-check-circle-fill me-2"></i>选择理由
                </h6>
                <p>{{ answer.analysis.reasoning }}</p>
              </div>

              <!-- 错误选项分析 -->
              <div class="analysis-section">
                <h6 class="section-title">
                  <i class="bi bi-x-circle-fill me-2"></i>错误选项分析
                </h6>
                <div v-for="(analysis, option) in answer.analysis.wrong_options" 
                     :key="option" 
                     class="wrong-option">
                  <div class="option-header">
                    <span class="option-label">{{ option }}</span>
                    {{ analysis.option_value }}
                  </div>
                  <div class="rebuttal">
                    <i class="bi bi-arrow-return-right me-2"></i>
                    {{ analysis.rebuttal }}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </template>
  </div>
</template>

<script>
import http from '@/router/http'

export default {
  name: 'EnglishReadingAnalysisView',
  data() {
    return {
      exam: '',
      part: '',
      title: '',
      error: null,
      loading: true,
      answers: []
    }
  },
  async created() {
    try {
      const params = {
        year: this.$route.query.year,
        subjectName: this.$route.query.subjectName,
        paperType: this.$route.query.paperType,
        moduleType: this.$route.query.moduleType,
        currentQuestionIndex: this.$route.query.currentQuestionIndex
      }

      this.exam = params.year
      this.part = params.currentQuestionIndex
      this.title = `${this.exam}年 阅读 Text ${this.part} 答案解析`

      const questionResponse = await http.get('/student/question/getQuestionInfoForEnglish', { params })

      if (questionResponse.data.code === 1) {
        const questionInfo = questionResponse.data.response
        
        const aiResponse = await http.post('/student/ai/forward/english/reading_comprehension', {
          article: questionInfo.article,
          questions: questionInfo.questions,
          answers: questionInfo.answers
        })

        // 添加调试日志
        console.log('AI Response:', aiResponse.data)

        if (aiResponse.data.code === 1 && aiResponse.data.response) {
          // 尝试解析返回的数据
          try {
            const result = JSON.parse(aiResponse.data.response.result)
            if (result && Array.isArray(result.answers)) {
              this.answers = result.answers
            } else {
              this.error = '解析数据格式不正确'
              console.error('Invalid data format:', result)
            }
          } catch (parseError) {
            // 如果数据已经是对象形式，直接使用
            if (aiResponse.data.response.result && Array.isArray(aiResponse.data.response.result.answers)) {
              this.answers = aiResponse.data.response.result.answers
            } else {
              this.error = '无法解析返回的数据'
              console.error('Parse error:', parseError)
            }
          }
        } else {
          this.error = aiResponse.data.message || '获取解析失败'
          console.error('AI response error:', aiResponse.data)
        }
      } else {
        this.error = questionResponse.data.message || '获取题目信息失败'
      }
    } catch (err) {
      console.error('Error details:', err)
      this.error = err.message || '加载页面时发生错误'
    } finally {
      this.loading = false
    }
  }
}
</script>

<style scoped>
.question-card {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
  overflow: hidden;
}

.card-header {
  background: #f8f9fa;
  padding: 1rem;
  border-bottom: 1px solid #eee;
}

.answer-badge {
  background: #e8f5e9;
  color: #2e7d32;
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 0.9rem;
}

.answer {
  font-weight: bold;
  font-size: 1.1em;
}

.card-body {
  padding: 1.5rem;
}

.analysis-section {
  margin-bottom: 1.5rem;
}

.section-title {
  color: #1976d2;
  font-size: 1rem;
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
}

.reference-text {
  border-left: 4px solid #1976d2;
  padding: 10px 15px;
  margin: 0 0 10px 0;
  background: #f8f9fa;
  font-style: italic;
  color: #666;
}

.wrong-option {
  margin-bottom: 1rem;
  padding: 12px;
  background: #f8f9fa;
  border-radius: 6px;
}

.option-header {
  font-weight: 500;
  margin-bottom: 8px;
}

.option-label {
  background: #ff5252;
  color: white;
  padding: 2px 8px;
  border-radius: 4px;
  margin-right: 8px;
  font-size: 0.9rem;
}

.rebuttal {
  color: #666;
  font-size: 0.9rem;
  padding-left: 24px;
}

.header {
  padding: 15px;
  background: white;
  position: sticky;
  top: 0;
  z-index: 1000;
}
</style> 